<template>
  <view>
    <view class="status-bar-height"></view>
    <!-- 头部 -->
    <view class="head">
      <!-- 头像 -->
      <view class="head_message">
        <!-- 头部左边-->
        <view class="head_left">
          <view class="head_left_portrait">
            <u-avatar
              :src="avatar? avatar:'https://img.ionepin.com/cd9dbadf634df8676fd1d67fae73cdd875ba1096.png'"
              size="120rpx"
            ></u-avatar>
            <!-- <image
              v-if="list.avatar ? true : false"
              :src="list.avatar"
              alt="" /> -->
          </view>
          <view class="head_left_right">
            <view class="head_lef_name">{{ nickName|| "未知" }}</view>
            <view class="head_attestation" v-if="identify">
              <view class="attestation">
                <image src="/static/renzheng.png" alt="" />
              </view>
              <view>
                已认证
              </view>
            </view>
            <view v-else @click="$u.route('pages/identify/index')" class="head_attestation">
              <view class="attestation">
                <image src="https://img.ionepin.com/bee26afb76d621530b60d0b2d74c0254da8678d5.png"></image>
              </view>
              <view>
                未认证
              </view>
            </view>
          </view>
        </view>
        <!-- 头部右边-->
        <view class="head_right">
          <view class="head_right_let" @click="$u.route('pages_v2/notice/index')">
            <image src="/static/notice.png" alt="" />
            <view class="hint" v-if="noticeCount > 0"></view>
          </view>
          <view class="head_right_right" @click="$u.route('pages/setting/index')">
            <image src="/static/sets.png" alt="" />
          </view>
        </view>
      </view>

      <!-- 账号信息 -->
      <view class="account">
        <view class="account_column">
          <view>{{ followNum }}</view>
          <view>关注</view>
        </view>
        <view class="account_column">
          <view>{{ fanNum }}</view>
          <view>粉丝</view>
        </view>
        <view class="account_column" @click="$u.route('pages_v2/pointLog/index')">
          <view>{{ userPoint }}</view>
          <view>金豆</view>
        </view>
        <view class="account_column" @click="$u.route('pages_v2/coupon/index')">
          <view>{{ userTicketCount }}</view>
          <view>卡券</view>
        </view>
      </view>

      <!-- 盲盒 -->
      <view class="mysterybox">
        <view
          class="mysterybox_left"
          @click="$u.route('pages_v2/grabOrder/index')"
        >
          <view class="mysterybox_img">
            <image src="/static/nft.png" alt="" />
          </view>
          <view class="mysterybox_Collection">藏品抢购</view>
        </view>
        <view class="mysterybox_right" @click="myblindbox">
          <view class="mysterybox_img">
            <image src="/static/box.png" alt="" />
          </view>
          <view class="mysterybox_Collection">我的盲盒</view>
        </view>
      </view>
    </view>

    <view class="middleware"></view>

    <!-- 底部 -->
    <view class="bottom">
      <view class="bottom_line" @click="$u.route('pages_v2/wallet/index')">
        <view>我的钱包</view>
        <view class="arrows">
          <image src="/static/insert copy 34.png" alt="" />
        </view>
        <view class="bottom_icon">
          <image src="/static/wallet.png" alt="" />
        </view>
      </view>
      <view class="bottom_line" @click="conversion">
        <view>我的兑换</view>
        <view class="arrows">
          <image src="/static/insert copy 34.png" alt="" />
        </view>
        <view class="bottom_icon">
          <image src="/static/change.png" alt="" />
        </view>
      </view>
      <view class="bottom_line" @click="$u.route('pages_v2/myPage/index')">
        <view>我的主页</view>
        <view class="arrows">
          <image src="/static/insert copy 34.png" alt="" />
        </view>
        <view class="arrows_object"
          >藏品 · {{ nftOwnerCount }}
        </view>
        <view class="bottom_icon">
          <image src="/static/homepage.png" alt="" />
        </view>
      </view>
      <view class="bottom_line" @click="$u.route('pages/share/index')">
        <view>邀请好友</view>
        <view class="arrows">
          <image src="/static/insert copy 34.png" alt="" />
        </view>
        <view class="Forafriend">
          <image src="/static/tag_save.png" alt="" />
        </view>
        <view class="bottom_icon">
          <image src="/static/share.png" alt="" />
        </view>
      </view>
      <view class="bottom_line" @click="$u.toast('暂未开放')">
        <view>我的代言</view>
        <view class="arrows">
          <image src="/static/insert copy 34.png" alt="" />
        </view>
        <view class="bottom_icon">
          <image src="/static/help.png" alt="" />
        </view>
      </view>
      <!--view class="bottom_line" @click="$u.route('pages/help/index')">
        <view>帮助中心</view>
        <view class="arrows">
          <image src="/static/insert copy 34.png" alt="" />
        </view>
        <view class="bottom_icon">
          <image src="/static/help2.png" alt="" />
        </view>
      </view--->
    </view>
  </view>
</template>

<script>
// import second from 'first'
export default {
  data() {
    return {
      // 原数据
      item: {},
      // 修改过的数据
      list: {},
    };
  },
  /*async created() {
    // getUserInfo();
    let res = await this.$store.dispatch("user/info");
    this.item = res;
    if (this.item.identify === 0) {
      this.list = { ...this.item, identify: "未认证" };
    }
    if (this.item.identify === 1) {
      this.list = { ...this.item, identify: "已认证" };
    }
  },*/
  onShow() {
     if (!this.$store.getters.token){
       this.$u.route('pages/login/index')
     }
  },
  methods: {
    myblindbox() {
      uni.navigateTo({
        url: "/pages_v2/blindbox/mybinbox/index",
      });
    },
    conversion() {
      uni.navigateTo({
        url: "/pages_v2/center/conversion/index",
      });
    },
  },
  onPullDownRefresh() {
    this.$store.dispatch("user/info")
    uni.stopPullDownRefresh()
  },
  onHide() {
    uni.stopPullDownRefresh()
  },
  computed: {
    avatar() {
      return this.$store.getters.avatar;
    },
    followNum() {
      return this.$store.getters.followNum;
    },
    fanNum() {
      return this.$store.getters.fanNum;
    },
    userPoint() {
      return this.$store.getters.userPoint;
    },
    userTicketCount() {
      return this.$store.getters.userTicketCount;
    },
    nftOwnerCount() {
      return this.$store.getters.nftOwnerCount;
    },
    identify() {
      return this.$store.getters.identify
    },
    nickName() {
      return this.$store.getters.nickName
    },
    noticeCount() {
      return this.$store.getters.noticeCount
    }
  },
};
</script>

<style lang="scss" scoped>
.status-bar-height {
  height: calc(var(--status-bar-height));
}
.head {
  height: 543rpx;
  // background-color: skyblue;
  overflow: hidden;
  image {
    width: 100%;
    height: 100%;
  }
  .head_message {
    margin-top: 91rpx;
    // background-color: skyblue;
    display: flex;
    justify-content: space-between;
    .head_left {
      width: 362rpx;
      height: 120rpx;
      //   background-color: #2cdd71;
      margin-left: 44rpx;
      display: flex;
      .head_left_right {
        margin-left: 20rpx;
        font-size: 25rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        // background-color: #fcd901;
        .head_attestation {
          width: 151rpx;
          height: 42rpx;
          color: #fff;
          font-size: 20rpx;
          text-align: center;
          line-height: 42rpx;
          border-radius: 25rpx;
          background-color: #545454;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          .attestation {
            width: 34rpx;
            height: 34rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
        }
        .head_lef_name {
          width: 213rpx;
          height: 45rpx;
          margin-left: 9rpx;
          line-height: 45rpx;
          //   background-color: skyblue;
        }
      }
      .head_left_portrait {
        width: 120rpx;
        height: 120rpx;
        // background-color: skyblue;
      }
    }
    .head_right {
      width: 135rpx;
      height: 50rpx;
      // background-color: red;
      margin-top: 13rpx;
      margin-left: 177rpx;
      margin-right: 26rpx;
      display: flex;
      justify-content: space-between;
      .head_right_let {
        position: relative;
        .hint {
          position: absolute;
          top: 12rpx;
          right: 8rpx;
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background-color: #f7b500;
        }
      }
      .head_right_let,
      .head_right_right {
        width: 50rpx;
        height: 50rpx;
        // background-color: #21d86d;
      }
    }
  }
  .account {
    // width: 698rpx;
    height: 120rpx;
    background-color: #4e4e4e;
    background: url("/static/tab.png") center;
    display: flex;
    justify-content: space-around;
    margin: 40rpx 26rpx;
    .account_column {
      height: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      font-size: 25rpx;
      color: #fff;
      list-style: none;
    }
  }
  .mysterybox {
    // width: 698rpx;
    height: 82rpx;
    // background-color: pink;
    margin: 50rpx 26rpx 0 26rpx;
    display: flex;
    justify-content: space-between;
    .mysterybox_left {
      margin-right: 10rpx;
    }
    .mysterybox_right {
      margin-left: 10rpx;
    }
    .mysterybox_left,
    .mysterybox_right {
      //width: 338rpx;
      flex: 1;
      height: 82rpx;
      // background-color: red;
      // border: 1px solid red;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background: url("/static/tab2.png") center;
    }

    .mysterybox_Collection {
      //width: 120rpx;
      height: 42rpx;
      font-size: 30rpx;
      // background-color: #21d86d;
    }
  }
  .mysterybox_img {
    width: 59rpx;
    height: 80rpx;
    // background-color: pink;
    margin-bottom: 10rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.middleware {
  height: 26rpx;
  background-color: #ececec;
}

.bottom {
  height: 665rpx;
  // background-color: pink;
  padding: 0 38rpx 0 112rpx;
  .bottom_line {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 109rpx;
    font-size: 30rpx;
    border-bottom: 1px solid #f1f3f4;
    .arrows {
      width: 35rpx;
      height: 35rpx;
      // background-color: skyblue;
      // background: url("../../static/insert copy 34.png") center right;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .arrows_object {
      position: absolute;
      right: 0rpx;
      margin-right: 40rpx;
    }
    .Forafriend {
      position: absolute;
      right: 0rpx;
      width: 158rpx;
      height: 40rpx;
      // background-color: skyblue;
      border-radius: 50rpx;
      margin-right: 30rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom_icon {
    position: absolute;
    top: 36rpx;
    left: -71rpx;
    width: 46rpx;
    height: 45rpx;
    // background-color: skyblue;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
